<html>
<head>
  <title>Clock</title>
  <style>
    body { padding: 5dip; }

    #clocks {
      size: *;
      flow: horizontal-flow;
    }

    .city {
      flow: vertical;
      size: *;
    }

    .city > caption {
      width: *;
      padding: 5dip;
      flow:horizontal;
      horizontal-align: center;
      font-size: 11pt;
      font-weight: 700;
    }

    .city > clock, .edit {
      margin-right: *;
      margin-left: *;
      margin-bottom: 5dip;
    }

    .city > .edit {
      flow: horizontal;
      width: max-content;
    }

    clock {
      behavior: native-clock;
      display: block;
      min-width: 150dip;
      min-height: 150dip;
    }

    .native-text {
      behavior: native-text;
      display: block;
      min-height: 100dip;
      min-width: 100dip;
      outline: 1px solid orange;
    }

    .italic {
      font-style: italic;
    }
    .bold {
      font-weight: bold;
    }
  </style>
  <script type="text/tiscript">

    // called from Rust
    function getLocalTime() {
      var d = new Date();
      return [d.hour, d.minute, d.second];
    }

    function getUtcTime(offset) {
      var d = new Date();
      d.UTChour += offset;
      return [d.UTChour, d.UTCminute, d.UTCsecond];
    }

    var timeSet = $(#set-time);
    var timeEdit = $(#edit-time);
    var timeShow = $(#show-time);

    timeEdit << event change {
      var now = this.value;
      var local = [now.hour, now.minute, now.second];
      stdout.printf("timeEdit: %v %v\n", now, local);
      timeShow.value = local;
    }

    timeSet << event click {
      var now = new Date();
      var local = [now.hour, now.minute, now.second];
      stdout.printf("timeSet: %v %v\n", now, local);
      timeEdit.value = now;
      timeShow.value = local;
    }

    function self.ready() {
      var now = new Date();
      var local = [now.hour, now.minute, now.second];
      stdout.printf("initial time: %v %v\n", now, local);
      timeShow.value = local;
    }

    // update window icon
    function setIcon() {
      var clock = $(clock);

      // get clock element size
      var (w, h) = clock.box(#dimension, #border);
      if (w == 0 || h == 0)
        return;

      // make a snapshot of it with 32x32 size
      var img = new Image(clock, w, h, 32, 32);
      var png = img.toBytes();
      img.destroy();

      // make an icon from the snapshot
      var icon = Image.fromBytes(png);
      view.windowIcon = icon;

      return true; // continue to update icon ;)
    }
    self.timer(1000, setIcon);

  </script>
</head>
<body>

  <div id="clocks" some>
    <div class="city">
      <caption>London</caption>
      <clock utc="0" title="UTC+0"></clock>
    </div>

    <div class="city">
      <caption>Tokyo</caption>
      <clock utc="+9" title="UTC+9"></clock>
    </div>

    <div class="city">
      <caption>New York</caption>
      <clock utc="-4" title="UTC-4"></clock>
    </div>
  </div>

  <div id="local" some>
    <div class="city">
      <caption>Frozen time</caption>
      <clock frozen id="show-time"></clock>
      <div class="edit">
        <widget type="time" value="now" id="edit-time" title="Change time of the drawn clock" />
        <widget type="button" id="set-time" title="Reset back to local time">=</widget>
      </div>
    </div>
  </div>

  <div>
    <div class="city">
      <caption>Text</caption>
      <div class="native-text">static text</div>
    </div>
  </div>


</body>
</html>
